<template>
  <div class="app">
    <div v-if="isShowEdit">
      <input type="text" v-model="editValue" ref="inp" />
      <button @click="confirm">确认</button>
    </div>
    <div v-else>
      <span>{{ title }}</span>
      <button @click="edit">编辑</button>
    </div>
    <input v-focus ref="inp1" type="text">
    <h1 v-color="color1">测试自定义标签动态绑定值1</h1>
    <h1 v-color="color2" ref="inp2">测试自定义标签动态绑定值2</h1>
    <button @click="testUserDefinedTagUpdate">测试自定义标签内容更新</button>

  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '大标题',
      isShowEdit: false,
      editValue: '',
      color1: 'red',
      color2: 'green'
    }
  },
  directives:{
    // focus:{
    //   inserted(el){
    //     el.focus()
    //     console.log(el)
    //   }
    // }
    color:{
      inserted(el, binding){
        console.log('组件加载完成触发' + el)
        el.style.color = binding.value
      },
      update(el, binding){
        console.log("指定的值修改了触发" + el.innerHTML)
        el.style.color = binding.value;
      }
    }
  },
  methods: {
    edit(){
      this.isShowEdit = true;
      this.$nextTick(()=>{
        this.$refs.inp.focus()
      })
      // setTimeout(()=>{
      //   this.$refs.inp.focus()
      // }, 1000)
    },
    testUserDefinedTagUpdate(){
      this.color2 ='red'
      //this.$refs.inp2.style.color='red'
    }
  },
}
</script>

<style>
</style>